<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间轴</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css"
      rel="stylesheet"
    />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    /* 定义变量 */
    :root {
      --time-axios-dot-size: 8px;
      --time-axios-dot-color: #fff;
      --time-axios-width: 500px;
      --time-axios-arrow-size: 8px;
    }
    body {
      margin: 0;
      background-image: linear-gradient(to right, #b8c2e8, #fda085);
    }
    /* 时间轴 */
    .time-axios {
      width: calc(var(--time-axios-width) + 2px);
      margin: 50px auto;
    }
    /* 时间轴的item */
    .time-axios-item {
      position: relative;
      width: calc(var(--time-axios-width) / 2);
      padding-bottom: 10px;
      /* 禁止复制 */
      user-select: none;
    }
    /* 时间轴的圆点 */
    .time-axios-dot {
      position: absolute;
      top: 44.5%;
      border-radius: 50%;
      transform: translateY(-50%);
      width: var(--time-axios-dot-size);
      height: var(--time-axios-dot-size);
      background-color: var(--time-axios-dot-color);
      box-shadow: 0 0 0 2px #b8c2e8;
    }
    .time-axios-arrow {
      position: absolute;
      top: 44.5%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: var(--time-axios-dot-size) solid transparent;
      border-bottom: var(--time-axios-dot-size) solid transparent;
    }
    /* 时间轴的左边 */
    .time-axios-item.float-left {
      float: left;
      border-right: 2px solid #b8c2e8;
      .time-axios-dot {
        right: calc(var(--time-axios-dot-size) * -1 / 2 - 1px);
      }
      .time-axios-arrow {
        right: var(--time-axios-dot-size);
        border-left: var(--time-axios-dot-size) solid #fff;
      }
    }
    /* 时间轴的右边 */
    .time-axios-item.float-right {
      float: right;
      border-left: 2px solid #b8c2e8;
      .time-axios-dot {
        left: calc(var(--time-axios-dot-size) * -1 / 2 - 1px);
      }
      .time-axios-arrow {
        left: var(--time-axios-dot-size);
        border-right: var(--time-axios-dot-size) solid #fff;
      }
      .time-axios-content {
        margin-left: 15px;
        margin-right: 0;
      }
    }
    .time-axios-content {
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      border-radius: 8px;
      margin-right: 15px;
    }

    .time-axios-content h3 span {
      color: #fda085;
    }
    .time-axios-content p {
      text-indent: 1em;
      color: #666;
      /* 三行 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
  <body>
    <div id="app">
      <section class="time-axios clearfix">
        <div
          class="time-axios-item"
          :class="item.type"
          v-for="(item,index) in timeDelayList"
        >
          <!-- 小圆点 -->
          <span class="time-axios-dot animate__animated animate__fadeIn"></span>
          <!-- 箭头 -->
          <span
            class="time-axios-arrow animate__animated animate__fadeIn"
          ></span>
          <!-- 内容 -->
          <div
            class="time-axios-content animate__animated animate__fadeIn"
            
          >
            <h3><span>“</span>{{item.title}}<span>”</span></h3>
            <p v-html="item.content"></p>
          </div>
        </div>
      </section>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          timeLine: [
            {
              title: "春风不解风情",
              content:
                "你是年少的欢喜。 年少的喜欢是你。 喜欢的少年是你。 少年喜欢的是你。",
              date: "2024-02-01",
              type: "float-left",
            },
            {
              title: "吹动少年的心",
              content:
                "一开始 你是年少的欢喜 喜欢的少年是你 而后来 你依旧是我年少的欢喜 却不再是我喜欢的少年",
              date: "2024-02-01",
              type: "float-right",
            },
            {
              title: "爱你孤身走暗巷",
              date: "2024-09-31",
              type: "float-right",
            },
            {
              title: "玫瑰你在哪里",
              content:
                "在给你的同学录只留一句“你是年少的欢喜”我知道你很笨但多年后我依然幻想你能倒着读一遍它，懂得我的喜欢…“喜欢的少年是你”",
              date: "2024-04-22",
              type: "float-left",
            },
            {
              title: "春风十里不如你",
              content: "春风十里不如你，你的笑颜如花开。",
              date: "2024-10-01",
              type: "float-left",
            },
            {
              title: "夜空中最亮的星",
              content:
                "夜空中最亮的星，能否听清，那仰望的人，心底的孤独和叹息。",
              date: "2024-10-01",
              type: "float-left",
            },
            {
              title: "开心.jpg",
              content: "要开心呀！",
              date: "2024-10-01",
              type: "float-right",
            },
          ],
          timeDelayList: [],
        };
      },
      mounted() {
        this.timeLine.forEach((item, index) => {
          setTimeout(() => {
            this.timeDelayList.push(item);
          }, 1500 * index);
        });
      },
    });
  </script>
</html>
